<template>
	<view class="content">
		
		<view class="order-info">
			<view class="left-box">
				<img class="order-img" :src="imgsrc + logisticsData.img[0]" alt="">
				<view>{{logisticsData.img.length}}件商品</view>
			</view>
			<view class="right-box">
				<view>配送企业：{{pageData.shipping_express}}</view>
				<view>快递单号：{{pageData.shipping_code}}</view>
				<!-- <view>联系电话：95338</view> -->
			</view>
		</view>
		
		<view class="steps">
			<view class="steps-item" :class="pageData.state== 1 ? 'current' : ''">
				<view class="steps-item-type">已发货</view>
				<view class="steps-sign"><image src="/static/img/user/icon_zhuangtaizhong.png" mode="widthFix"></image></view>
				<!-- <view class="steps-item-addr">{{address.start}}</view> -->
			</view>
			<view class="steps-item" :class="pageData.state== 0 ? 'current' : ''">
				<view class="steps-item-type">运输中</view>
				<view class="steps-sign"><image src="/static/img/user/icon_zhuangtaizhong.png" mode="widthFix"></image></view>
			</view>
			<view class="steps-item" :class="pageData.state== 5 ? 'current' : ''">
				<view class="steps-item-type">派件中</view>
				<view class="steps-sign"><image src="/static/img/user/icon_zhuangtaizhong.png" mode="widthFix"></image></view>
			</view>
			<view class="steps-item" :class="pageData.state== 3 ? 'current' : ''">
				<view class="steps-item-type">已签收</view>
				<view class="steps-sign"><image src="/static/img/user/icon_zhuangtaizhong.png" mode="widthFix"></image></view>
				<!-- <view class="steps-item-addr">{{logisticsData.addr}}</view> -->
			</view>
			<view class="progress-bar">
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>
		
		<view class="logistics-details">
			<view class="title">物流详情</view>
			<view class="logistics-item" v-for="(item,index) in pageData.traces" :key="index" :class="index==0?'current':''">
				<view class="progress-bar"><text></text></view>
				<view>{{item.context}}</view>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Api from '@/common/api.js';
	
	export default {
		computed: {
			...mapState(['logistics'])
		},
		data () {
			return {
				imgsrc: Api.imgsrc,
				logisticsData: {},
				params: {
					id: '',
					operation: 'express'
				},
				pageData: {},
				address: {
					start: '',
					end: ''
				}
			}
		},
		onLoad (options) {
			this.logisticsData = this.$store.state.logistics
			console.log(`${JSON.stringify(this.logisticsData)}`)
			this.params.id = options.id;
			this.loadData();
		},
		methods: {
			async loadData() {
				let data = await Api.apiCall('post', Api.order.operationOrder, this.params);
				this.pageData = data;
				this.pageData.traces = data.traces.reverse();  // 物流详情->倒叙
				let matchAddress = this.pageData.traces[0].context.match(/【(\S*)】/)
				this.address.start = matchAddress.length > 0 ? matchAddress[0] : '';  // 起始地址
			},
		}
	}
</script>

<style lang="scss">
	
	.content {
		padding: 30upx;
		box-sizing: border-box;
	}
	
	.order-info {
		height: 136upx;
		display: flex;
		
		.left-box {
			position: relative;
			border-radius: 10upx;
			background-color: #e5e5e5;
			overflow: hidden;
			
			.order-img {
				width: 136upx;
				height: 136upx;
			}
			
			view {
				width: 100%;
				height: 42upx;
				text-align: center;
				line-height: 42upx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(35,35,35,0.5);
				font-size: 28upx;
				font-weight: 400;
				color: #fff;
			}
			
		}
		
		.right-box {
			flex: 1;
			font-size: 28upx;
			line-height: 30upx;
			font-weight: 400;
			padding-left: 40upx;
			
			view {
				margin-bottom: 24upx;
			}
		}
	}
	
	.steps {
		display: flex;
		margin-top: 60upx;
		position: relative;
		
		.steps-item {
			flex: 1;
			height: 180upx;
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: #767777;
			position: relative;
			
			.steps-item-type {
				display: inline-block;
				padding: 4upx 14upx;
			}
			
			.steps-sign {
				display: inline-block;
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
				background-color: #E1E4E5;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%)translateY(-50%);
				
				image {
					width: 100%;
					height: 100%;
					display: none;
				}
			}
			
			.steps-item-addr {
				margin-top: 80upx;
				font-size: 24upx;
				color: #ACADAE;
			}
			
		}
		
		.current {
			
			.steps-item-type {
				background-color: #000;
				color: #fff;
				border-radius: 4upx;
			}
			
			.steps-sign {
				// background-color: #000;
				
				image {
					display: block;
				}
				
			}
		}
		
		.progress-bar {
			width: 75%;
			display: flex;
			position: absolute;
			top: 90upx;
			left: 50%;
			transform: translateX(-50%);
			
			view {
				flex: 1;
				width: 132upx;
				height: 3upx;
				background-color: #E1E4E5;
				margin: 0 29upx;
			}
		}
	}
	
	.logistics-details {
		margin-top: 20upx;
		
		.title {
			font-size: 28upx;
			line-height: 90upx;
			border-bottom: 1upx solid #EFF2F4;
			margin-bottom: 20upx;
		}
		
		.logistics-item {
			position: relative;
			margin: 0 30upx;
			font-size: 26upx;
			color: #ACADAE;
			line-height: 40upx;
			padding-left: 40upx;
			padding-bottom: 40upx;
			box-sizing: border-box;
			border-left: 1upx solid #E1E4E5;
			text-align: justify;
			
			.progress-bar {
				width: 36upx;
				height: 36upx;
				background-color: #fff;
				position: absolute;
				top: 0;
				left: -19upx;
				
				text {
					display: inline-block;
					width: 22upx;
					height: 22upx;
					border-radius: 50%;
					background-color: #E1E4E5;
					position: absolute;
					top: 7upx;
					left: 7upx;
				}
			}
			
			.time {
				line-height: 60upx;
			}
			
		}
		
		.logistics-item:last-child {
			border: none !important;
		}
		
		.current {
			color: #000;
			border-color: #000;
			.progress-bar {
				text {
					background-color: #000;
				}
			}
		}
	}
	
</style>
